<!-- 上传图片组件 -->
<template>
    <div class="upload-img-btn">
        <el-upload
                :action="policy.host"
                :show-file-list="false"
                :data="postData"
                :limit="1"
                ref="upload"
                accept="image/jpeg,image/jpg,image/bmp,image/png"
                :on-success="handleUploadSuccess"
                :before-upload="beforeUpload"
                :on-change="changeUpload"
        >
            <el-button size="small" type="primary">
                {{uploadText}}
            </el-button>
        </el-upload>
    </div>
</template>

<script lang="ts">
    import { Vue, Component, Prop } from 'vue-property-decorator';
    import uuid from 'uuid';
    import { mapState, mapMutations, mapGetters, mapActions } from 'vuex'
    @Component({
        props: ['uploadText'],
        computed: {
            ...mapGetters([
                'policy'
            ]),
            count(){
                return this.$store.state
            }
        },
        methods: {
            ...mapActions({
                add: 'getPolicy'
            })
        }
    })
    export default class UploaderImages extends Vue {
        @Prop() isUpload: string;
        postData = {};
        imgname: string;
        handleUploadSuccess (res) {
            let ossImg = {
                file_name: this.imgname,
                file_path: res.data.path
            }
            this.$http.post('file/saveFilePath',ossImg)
                .then((response) => {
                    let imgData = {
                        name: this.imgname,
                        path: res.data.path,
                        id: response.data
                    }
                    this.$emit('input', imgData);
                })
            this.$refs.upload.clearFiles(); //上传成功之后清除历史记录(解决第二次无法上传)
        }
        beforeUpload (file) {
            let filename = file.name;
            this.$emit('imgName',filename)
            this.imgname = filename.split('.')[0];
            let existName = filename.substr(filename.lastIndexOf('.'));
            this.postData.OSSAccessKeyId = this.policy.OSSAccessKeyId;
            this.postData.host = this.policy.host;
            this.postData.policy = this.policy.policy;
            this.postData.saveName = this.policy.saveName;
            this.postData.signature = this.policy.signature;
            this.postData.key = 'hpxpic/' + uuid() + existName;
            this.postData.callback = window.btoa(JSON.stringify({
                callbackUrl: 'https://1894469675823662.cn-shanghai.fc.aliyuncs.com/2016-08-15/proxy/hpxfileoss/callback/',   // hpxfileoss
                //callbackUrl: ' https://1894469675823662.cn-shanghai.fc.aliyuncs.com/2016-08-15/proxy/hpxoss/callback/',          // hpxoss
                callbackBody: '{"object":${object}}',
                callbackBodyType: 'application/json'
            }))
        }
        changeUpload(){

        }
        created() {
            this.add();
        }
        mounted () {}
    }
</script>

<style scoped lang="scss">
    .upload-img-btn {
        margin-top: 10px;
        text-align: center;
        .el-button--primary {
            color: $__color-primary;
            background-color: $__color-bg-unimportance;
            border-color: $__color-primary;
            height: 32px;
        }
    }
</style>